iT邦幫忙

2023 iThome 鐵人賽

DAY 25
0
自我挑戰組

網頁學習30天系列 第 25

網頁學習30天 day25

  • 分享至 

  • xImage
  •  

接下來,我來寫一個簡單的 Node.js Express 應用程式範例。在這個範例中,我們將建立一個簡單的 Web 伺服器,它會回應用戶端的 HTTP 請求

// 引入 Express 框架
const express = require('express');
// 建立一個 Express 應用程式
const app = express();
// 設定應用程式的通用中介軟體(middleware),用於解析 HTTP 請求的主體
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 處理根路徑的 GET 請求
app.get('/', (req, res) => {
    res.send('歡迎來到 Express 應用程式!');
});

// 處理 /api 路徑的 GET 請求
app.get('/api', (req, res) => {
    res.json({ message: '這是一個 Express API 範例!' });
});

// 啟動伺服器,監聽 3000 號埠
app.listen(3000, () => {
    console.log('伺服器已啟動,監聽埠號 3000');
});

接著就能在網頁執行:
https://ithelp.ithome.com.tw/upload/images/20231010/201628570uoHGIQS80.png
Express 也可以用於建立多頁面網頁應用程式,可以使用模板引擎(例如 EJS、Handlebars 等)來動態生成 HTML 頁面,首先先安裝:

npm install ejs

接下來:

const express = require('express');
const app = express();
const port = 3000;

// 設定模板引擎為EJS
app.set('view engine', 'ejs');

// 處理根路徑的 GET 請求
app.get('/', (req, res) => {
    const data = {
        message: '歡迎來到 Express 網頁應用程式!'
    };
    // 將資料傳遞到EJS模板,動態生成HTML
    res.render('index', data);
});

app.listen(port, () => {
    console.log(`伺服器已啟動,監聽埠號 ${port}`);
});

記得需要先建立相應文件


上一篇
網頁學習30天 day24
下一篇
網路學習30天 day26
系列文
網頁學習30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言